<script setup>
import TableBase from '@/components/Table-Base.vue'
import { ref } from 'vue'
import SearchForm from '@/components/Search-Form.vue'
import TablePagination from '@/components/Table-Pagination.vue'
import { getPaymentList } from '@/api/payment'
import MainContent from '@/components/Main-Content.vue'


const paymentMethodMap = {
    'Alipay': '支付宝',
    'WeChat': '微信',
    'Cash': '现金'
}
const formData = ref({
    carNumber: '',
    paymentStatus: ''
})
const query = ref({
    page: 1,
    pageSize: 10
})
const listData = ref({
    list: [],
    total: 0
})
const columns = ref([
    {
        title: '序号',
        colKey: 'serial-number',
        width: 80
    },
    {
        title: '车牌号码',
        colKey: 'carNumber'
    },
    {
        title: '收费类型',
        colKey: 'chargeType'
    },
    {
        title: '停车时长',
        colKey: 'parkingTime'
    },
    {
        title: '缴纳状态',
        colKey: 'paymentStatus'
    },
    {
        title: '缴纳方式',
        colKey: 'paymentMethod'
    },
    {
        title: '缴纳费用（元）',
        colKey: 'actualCharge',
        width: 150
    },
    {
        title: '缴纳时间',
        colKey: 'paymentTime',
        width: 220
    }
])

const search = async  () => {
    const params = JSON.parse(JSON.stringify(formData.value))
    if (params.paymentStatus === '-1') params.paymentStatus = null
    const res = await getPaymentList({
        ...query.value,
        ...params
    })
    listData.value.list = res.data.rows.map(e => {
        e.chargeType === 'card' ? e.chargeType = '月卡' : e.chargeType = '临时停车'
        e.paymentStatus === 0 ? e.paymentStatus = '待缴纳' : e.paymentStatus = '已缴纳'
        e.paymentMethod = paymentMethodMap[e.paymentMethod]
        return e
    })
    listData.value.total = res.data.total
}
const reset = () => {
    formData.value = {
        carNumber: '',
        paymentStatus: ''
    }
    search()
}
const changePage = e => {
    query.value.page = e.current
    query.value.pageSize = e.pageSize
    search()
}

search()
</script>

<template>
    <main-content>
        <search-form>
            <t-form
                ref="form"
                :data="formData"
                label-width="auto"
                layout="inline"
            >
                <t-form-item label="车牌号码">
                    <t-input v-model.trim="formData.carNumber" placeholder="请输入车牌号码"></t-input>
                </t-form-item>

                <t-form-item label="缴纳状态">
                    <t-select
                        placeholder="请选择缴纳状态"
                        v-model.trim="formData.paymentStatus"
                        showArrow>
                        <t-option key="-1" label="全部" value="-1"/>
                        <t-option key="0" label="待缴纳" value="0"/>
                        <t-option key="1" label="已缴纳" value="1"/>
                    </t-select>
                </t-form-item>

                <t-form-item style="min-width: auto">
                    <t-button @click="search" type="submit" style="margin-right: 10px;">查询</t-button>
                    <t-button @click="reset" variant="outline">重置</t-button>
                </t-form-item>
            </t-form>
        </search-form>

        <table-base :columns="columns" :list="listData.list"/>

        <table-pagination :total="listData.total" @changePage="changePage"></table-pagination>
    </main-content>
</template>

<style scoped lang="scss">
</style>
